<template>
  <div class="app-container">
    <el-form v-show="showSearch" ref="queryForm" :inline="true" :model="queryParams">
      <el-form-item label="入党状态" prop="partyMembership">
        <el-select v-model="queryParams.partyMembership" clearable placeholder="入党状态" size="small">
          <el-option
            v-for="dict in partyMembershipOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="待处理级别" prop="pendingLevel">
        <el-select v-model="queryParams.pendingLevel" clearable placeholder="待处理级别" size="small">
          <el-option
            v-for="dict in pendingLevelOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="搜索关键字" prop="filterText">
        <el-input
          v-model="queryParams.filterText"
          clearable
          placeholder="关键字"
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-search" size="mini" type="primary" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          icon="el-icon-plus"
          size="mini"
          type="primary"
          @click="handleAdd"
        >新增
        </el-button>
      </el-col>
      <!--<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>-->
      <right-toolbar :showSearch.sync="showSearch"></right-toolbar>
    </el-row>
    <!--党员信息表-->
    <el-table :data="tableData" border height="580" style="width: 100%;overflow: auto">
      <el-table-column label="序号" type="index"></el-table-column>
      <el-table-column label="日期" prop="date" width="180"></el-table-column>
      <el-table-column label="姓名" prop="name" width="180"></el-table-column>
      <el-table-column label="地址" prop="address"></el-table-column>
      <el-table-column align="center" class-name="small-padding fixed-width" label="操作" width="200">
        <template slot-scope="scope">
          <el-button icon="el-icon-search" size="mini" type="text" @click="handleSelect(scope.row)">详情</el-button>
          <el-button icon="el-icon-edit" size="mini" type="text" @click="handleUpdate(scope.row)">修改</el-button>
          <el-button icon="el-icon-delete" size="mini" type="text" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-->
    <div class="block" style="position: relative;margin-left: 32%;margin-top: 3%">
      <el-pagination
        :current-page="currentPage"
        :page-size="pageSize"
        :page-sizes="[10, 20, 30, 40]"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>

export default {
  name: 'orgManage',
  data() {
    return {
      // 显示搜索条件
      showSearch: true,
      /*搜索值*/
      queryParams: {
        partyMembership: undefined,
        pendingLevel: undefined,
        filterText: ''
      },
      /*入党状态*/
      partyMembershipOptions: [
        { dictValue: 1, dictLabel: '积极分子' },
        { dictValue: 2, dictLabel: '申请人' }
      ],
      pendingLevelOptions: [
        { dictValue: 1, dictLabel: '正常期内' },
        { dictValue: 2, dictLabel: '加急' }
      ],
      tableData: [
        { date: '2016-05-03', name: '张三', address: '上海市普陀区金沙江路 1518 弄' },
        { date: '2016-05-02', name: '李四', address: '上海市普陀区金沙江路 1518 弄' },
        { date: '2016-05-04', name: '王五', address: '上海市普陀区金沙江路 1518 弄' },
        { date: '2016-05-01', name: '赵六', address: '上海市普陀区金沙江路 1518 弄' },
        { date: '2016-05-08', name: '田七', address: '上海市普陀区金沙江路 1518 弄' },
        { date: '2016-05-06', name: '老一', address: '上海市普陀区金沙江路 1518 弄' },
        { date: '2016-05-07', name: '老二', address: '上海市普陀区金沙江路 1518 弄' },
        { date: '2016-05-07', name: '老二', address: '上海市普陀区金沙江路 1518 弄' },
        { date: '2016-05-07', name: '老二', address: '上海市普陀区金沙江路 1518 弄' },
        { date: '2016-05-07', name: '老二', address: '上海市普陀区金沙江路 1518 弄' },
      ],
      pageSize: 10,
      total: 20,
      currentPage: 1
    }
  },
  methods: {
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      console.log('重置按钮操作')
    },
    /** 搜索按钮操作 */
    handleQuery() {
      console.log('搜索按钮操作')
    },
    /** 新增操作按钮操作 */
    handleAdd(row) {
      console.log('新增操作按钮操作')
    },
    /*分页*/
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    },
    /** 详情按钮操作 */
    handleSelect(row) {
      console.log('详情按钮操作')
    },
    /**
     * 修改按钮操作
     * @param row
     */
    handleUpdate(row) {
      console.log('修改按钮操作')
    },
    /**
     * 删除按钮操作
     * @param row
     */
    handleDelete(row) {
      console.log('删除按钮操作')
    }
  }
}
</script>

<style scoped>

</style>
